<template>
  <div>
    <Echart
      :options="options"
      height="600px"
      width="470px"
    />
  </div>
</template>

<script>
import Echart from '../../../common/echart'

export default {
  components: {
    Echart
  },
  // 这里是预留给你传数据的
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      options: {}
    }
  },
  watch: {
    cdata: {
      handler() {
        const datas = [
          { value: 10453, name: '有限空间', rate: '20%' },
          { value: 20444, name: '重大危险', rate: '10%' },
          { value: 30646, name: '涉氨', rate: '22%' },
          { value: 40643, name: '涉爆粉尘', rate: '11%' }
        ]

        let datap = []
        const colorList = ['#008AFF', '#2FC25B', '#FFF440', '#FB497C']
        const color = colorList.splice(0, datas.length)
        for (let i = 0; i < datas.length; i++) {
          datap.push({
            value: datas[i].value,
            name: ''
          })
          color.push('transparent')
        }
        datap = datas.concat(datap)
        this.options = {
          color: color,
          series: [
            {
              name: 'Nightingale Chart',
              type: 'pie',
              radius: [40, 100],
              center: ['50%', '70%'],
              roseType: 'radius',
              startAngle: 180,
              legendHoverLink: false,
              label: {
                show: true,
                position: 'outside',
                formatter(params) {
                  return params.data.name
                }
              },
              emphasis: {
                label: {
                  show: false
                }
              },
              data: datap
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
